<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ITableData } from "./data";
import IconSvg from "@/components/IconSvg/index.vue";
import { queryList, deleteItem } from "./service";
import { IResponseData } from "@/@types/utils.request";
import add from "./components/add.vue";
import edit from "./components/edit.vue";
import { formatDate } from "@/utils/formatDate";

const table = reactive<ITableData>({
	loading: false,
	list: [],
	pagination: {
		total: 0,
		pageNum: 1,
		pageSize: 10,
	},
});
// 新增
const adminId = ref<number>();
const addVisible = ref<boolean>(false);
const handAddChange = () => {
	addVisible.value = true;
};
// 编辑
const editVisible = ref<boolean>(false);
const handEditChange = (id: number) => {
	adminId.value = id;
	editVisible.value = true;
};
type T = /*unresolved*/ any;
const treeList = ref<Array<T>>([]);

// 列表数据
const getList = async (): Promise<void> => {
	table.loading = true;
	try {
		const response: IResponseData<any> = await queryList({
			code: "top_level",
		});
		const { data } = response;
		treeList.value = [{ id: 0, name: "顶级菜单", children: [...(data || [])] }];
		table.list = data || [];
	} catch (error: any) {
		console.log(error);
	}
	table.loading = false;
};

// 删除数据
const handDelChange = (id: number) => {
	ElMessageBox.confirm("是否删除该数据，请谨慎操作？", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(async () => {
			const response: IResponseData<any> = await deleteItem({
				id,
			});
			const { code, msg } = response;
			if (code === 0) {
				ElMessage({
					message: msg,
					type: "success",
				});
				onRefresh();
			} else {
				ElMessage({
					message: msg,
					type: "error",
				});
			}
		})
		.catch((error: any) => {
			// catch error
			console.log(error);
		});
};

// 刷新数据
const onRefresh = () => {
	getList();
};

onMounted(() => {
	getList();
});
const route = useRoute();
</script>

<template>
	<add v-model="addVisible" :list="treeList" @refresh="onRefresh" />
	<edit v-model="editVisible" :id="adminId" :list="treeList" @refresh="onRefresh" />
	<el-card shadow="never">
		<template #header>
			<el-row justify="space-between">
				<el-col :span="8" style="font-size: 18px"> <IconSvg name="modular" />&nbsp;{{ route.meta.title }}</el-col>
				<el-col :span="8" style="text-align: end">
					<el-button type="primary" @click="handAddChange"
						><template #icon><IconSvg name="add-bold" /></template> 新增</el-button
					>
				</el-col>
			</el-row>
		</template>

		<div style="width: 99.9%">
			<el-table row-key="id" :data="table.list" v-loading="table.loading" stripe border>
				<el-table-column
					type="index"
					label="序号"
					width="70"
					:index="
						(index) => {
							return (table.pagination.pageNum - 1) * table.pagination.pageSize + index + 1;
						}
					"
				>
				</el-table-column>
				<el-table-column label="菜单名称" prop="name">
					<template #default="{ row }"> <IconSvg :name="row.icon" />&nbsp;&nbsp;{{ row.name }} </template>
				</el-table-column>
				<el-table-column label="路径" prop="path"> </el-table-column>
				<el-table-column label="图标" prop="icon"> </el-table-column>
				<el-table-column label="排序" prop="sort"> </el-table-column>

				<el-table-column label="创建时间" prop="createTime">
					<template #default="{ row }">
						{{ formatDate(row.createTime) }}
					</template>
				</el-table-column>

				<el-table-column label="操作" prop="action" width="160">
					<template #default="{ row }">
						<el-button type="primary" link @click="handEditChange(row.id)"
							><template #icon><IconSvg name="edit" /></template>编辑</el-button
						>
						<el-button type="danger" link @click="handDelChange(row.id)"
							><template #icon><IconSvg name="delete" /></template>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-card>
</template>
